<!-- 回到头部 那一块 -->
<template>
  <div class="box" :style="disBottom">
    <div class="to-top-box" @mouseenter="showFlag==true">
      <el-backtop>
        <i class="el-icon-arrow-up"></i>
      </el-backtop>
    </div>
    <div class="edit-box">
      <i class="el-icon-edit"></i>
    </div>
    <div class="qr-box">
      <i class="fa fa-qrcode" aria-hidden="true"></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showFlag: false,
      disBottom:{
          bottom: 10+'px',
      },
    };
  },

  components: {},

  mounted() {
    //滚动条在Y轴上的滚动距离
    function getScrollTop() {
      var scrollTop = 0,
        bodyScrollTop = 0,
        documentScrollTop = 0;
      if (document.body) {
        bodyScrollTop = document.body.scrollTop;
      }
      if (document.documentElement) {
        documentScrollTop = document.documentElement.scrollTop;
      }
      scrollTop =
        bodyScrollTop - documentScrollTop > 0
          ? bodyScrollTop
          : documentScrollTop;
      return scrollTop;
    }
    //文档的总高度
    function getScrollHeight() {
      var scrollHeight = 0,
        bodyScrollHeight = 0,
        documentScrollHeight = 0;
      if (document.body) {
        bodyScrollHeight = document.body.scrollHeight;
      }
      if (document.documentElement) {
        documentScrollHeight = document.documentElement.scrollHeight;
      }
      scrollHeight =
        bodyScrollHeight - documentScrollHeight > 0
          ? bodyScrollHeight
          : documentScrollHeight;
      return scrollHeight;
    }
    //浏览器视口的高度
    function getWindowHeight() {
      var windowHeight = 0;
      if (document.compatMode == "CSS1Compat") {
        windowHeight = document.documentElement.clientHeight;
      } else {
        windowHeight = document.body.clientHeight;
      }
      return windowHeight;
    }
    window.addEventListener('scroll',()=>{
        if (getScrollHeight()-getScrollTop() -getWindowHeight() < 560) {
            this.disBottom.bottom = 580 + 'px'
        }else{
            this.disBottom.bottom = 10 + 'px'
        }
    },false)
    console.log(this.disBottom.bottom)

  },
  methods: {
    
  }
};
</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
>>>.el-backtop {
  position: static;
  border-radius: 0;
  color: rgb(170, 170, 170);
  border: 1px solid #e5e5e5;
  box-sizing: border-box;

  &:hover {
    background-color: #ffffff;
  }

  .el-icon-caret-top {
    display: none;
  }
}

.box {
  position: fixed;
  right: 360px;
  color: rgb(170, 170, 170);

  .edit-box, .qr-box {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    text-align: center;
    line-height: 40px;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 20px;
  }
}
</style>